<template>
  <p-card>
    <p-alert message="基础信息" type="info" />
    <p-form-model
      ref="baseInfoData"
      :model="baseInfoData"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <p-row :gutter="24">
        <p-col :span="8">
          <p-form-model-item ref="inspectBillno" label="送检单号" prop="inspectBillno">
            <p-input
              v-model="baseInfoData.inspectBillno"
              @blur="
          () => {
            $refs.inspectBillno.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="productionBillno" label="生产工单" prop="productionBillno">
            <p-input
              v-model="baseInfoData.productionBillno"
              @blur="
          () => {
            $refs.productionBillno.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="processBillno" label="工序工单" prop="processBillno">
            <p-input
              v-model="baseInfoData.processBillno"
              @blur="
          () => {
            $refs.processBillno.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="mcode" label="产品编号" prop="mcode">
            <p-input
              v-model="baseInfoData.mcode"
              @blur="
          () => {
            $refs.mcode.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="mname" label="产品名称" prop="mname">
            <p-input
              v-model="baseInfoData.mname"
              @blur="
          () => {
            $refs.mname.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="processTwo" label="二级工序" prop="processTwo">
            <p-input
              v-model="baseInfoData.processTwo"
              @blur="
          () => {
            $refs.processTwo.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="linename" label="线体" prop="linename">
            <p-input
              v-model="baseInfoData.linename"
              @blur="
          () => {
            $refs.linename.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="deviceCode" label="设备编码" prop="deviceCode">
            <p-input
              v-model="baseInfoData.deviceCode"
              @blur="
          () => {
            $refs.deviceCode.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="inspectTimes" label="检验次数" prop="inspectTimes">
            <p-input
              v-model="baseInfoData.inspectTimes"
              @blur="
          () => {
            $refs.inspectTimes.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="confirmTime" label="确认时间" prop="confirmTime">
            <p-input
              v-model="baseInfoData.confirmTime"
              @blur="
          () => {
            $refs.confirmTime.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="confirmBy" label="确认人员" prop="confirmBy">
            <p-input
              v-model="baseInfoData.confirmBy"
              @blur="
          () => {
            $refs.confirmBy.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="isSimple" label="isSimple" prop="isSimple">
            <p-select v-model="baseInfoData.isSimple" placeholder="please select your zone">
              <p-select-option :value="1">否</p-select-option>
              <p-select-option :value="0">是</p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
        <!-- <p-col :span="24">
          <p-form-model-item :wrapper-col="{offset: 2 }">
            <p-button type="primary" @click="onSubmit">Create</p-button>
            <p-button style="margin-left: 10px;" @click="resetForm">Reset</p-button>
          </p-form-model-item>
        </p-col>-->
      </p-row>
    </p-form-model>
    <p-alert message="检验项目" type="info" />

    <p-table :columns="tableColumns" :data-source="tableData" :pagination="false" bordered>
      <template slot="name" slot-scope="text">
        <a>{{ text }}</a>
      </template>
    </p-table>
    <p-alert message="审批记录" type="info" />

    <p-table :columns="table2Columns" :data-source="table2Data" :pagination="false" bordered>
      <template slot="name" slot-scope="text">
        <a>{{ text }}</a>
      </template>
    </p-table>
    <p-alert message="流程处理" type="info" />

    <p-form-model
      ref="processProcessingData"
      :label-col="{span:2}"
      :wrapper-col="{span:12}"
      :model="processProcessingData"
    >
      <p-row :gutter="24">
        <p-col :span="24">
          <p-form-model-item ref="operation" label="操作" prop="operation">
            <p-radio-group v-model="processProcessingData.operation">
              <p-radio :value="1">通过</p-radio>
              <p-radio :value="2">驳回</p-radio>
            </p-radio-group>
          </p-form-model-item>
        </p-col>
        <p-col :span="24">
          <p-form-model-item
            ref="unqualifiedWorkStation"
            label="检验不合格工站"
            prop="unqualifiedWorkStation"
          >
            <p-select
              v-model="processProcessingData.unqualifiedWorkStation"
              placeholder="please select your zone"
            >
              <p-select-option
                v-for="(item,index) in workStationOptions"
                :key="index"
                :value="item.value"
              >{{item.name}}</p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
        <p-col :span="24">
          <p-form-model-item ref="remarks" label="备注" prop="remarks">
            <p-input
              v-model="processProcessingData.remarks"
              type="textarea"
              @blur="
          () => {
            $refs.remarks.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="24">
          <p-form-model-item ref="currentProcessor" label="当前处理人" prop="currentProcessor">
            <p-input
              v-model="processProcessingData.currentProcessor"
              @blur="
          () => {
            $refs.currentProcessor.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
      </p-row>
    </p-form-model>
    <p-button type="primary">提交</p-button>
  </p-card>
</template>

<script>
import { SubmitOnchangMixin } from "@/mixins/SubmitOnchangMixin";
import { httpAction, putAction, api } from "@/api/manage";
import pick from "lodash.pick";
import JDate from "@/components/jeecg/JDate";
import JSelectUserByDep from "@/components/jeecgbiz/JSelectUserByDep";
import JDictSelectTag from "@/components/dict/JDictSelectTag";

export default {
  name: "MesQcInspectTaskReviewWireModal",
  mixins: [SubmitOnchangMixin],
  components: {
    JDate,
    JSelectUserByDep,
    JDictSelectTag,
  },
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      other: "",
      baseInfoData: {
        inspectBillno: "001", //送检单号
        productionBillno: "", //生产工单
        processBillno: "001", //工序工单
        mcode: "", //产品编号
        mname: "", //产品名称
        processTwo: "", //二级工序
        linename: "", //线体
        deviceCode: "", //设备编码
        inspectTimes: "3", //检验次数
        confirmTime: "2020-01-01", //确认时间
        confirmBy: "", //确认人员
        isSimple: 1,
      },
      rules: {
        inspectBillno: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        productionBillno: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        processBillno: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        mcode: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        mname: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        processTwo: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        linename: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        deviceCode: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        inspectTimes: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        confirmTime: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        confirmBy: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        isSimple: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
      },
      tableColumns: [
        //检验项目表格表头
        {
          title: "序号",
          dataIndex: "key",
        },
        {
          title: "工站",
          dataIndex: "workStation",
        },
        {
          title: "线号",
          dataIndex: "palletname",
        },
        {
          title: "L1",
          dataIndex: "line1",
        },
        {
          title: "L2",
          dataIndex: "line2",
        },
        {
          title: "A端",
          dataIndex: "aend",
        },
        {
          title: "B端",
          dataIndex: "bend",
        },
        {
          title: "C端",
          dataIndex: "cend",
        },
        {
          title: "D端",
          dataIndex: "dend",
        },
        {
          title: "E端",
          dataIndex: "eend",
        },
        {
          title: "F端",
          dataIndex: "fend",
        },
        {
          title: "阻抗",
          dataIndex: "impedance",
        },
        {
          title: "颜色",
          dataIndex: "color",
        },
        {
          title: "是否划伤",
          dataIndex: "isScratch",
        },
        {
          title: "检验结果",
          dataIndex: "testResults",
        },
        {
          title: "检验人",
          dataIndex: "Inspector",
        },
        {
          title: "检验时间",
          dataIndex: "InspectionTime",
        },
      ],
      tableData: [
        //检验项目表格表体
        {
          key: "1",
          workStation: "线材预制",
          palletname: "#1",
          line1: "234",
          line2: "345",
          aend: "123",
          bend: "123",
          cend: "123",
          dend: "123",
          eend: "123",
          fend: "123",
          impedance: "50欧姆",
          color: "红色",
          isScratch: "否",
          testResults: "合格",
          Inspector: "张三",
          InspectionTime: "2020/5/09 9:34",
        },
        {
          key: "2",
          workStation: "线材预制",
          palletname: "#1",
          line1: "234",
          line2: "345",
          aend: "123",
          bend: "123",
          cend: "123",
          dend: "123",
          eend: "123",
          fend: "123",
          impedance: "50欧姆",
          color: "红色",
          isScratch: "否",
          testResults: "合格",
          Inspector: "张三",
          InspectionTime: "2020/5/09 9:34",
        },
        {
          key: "3",
          workStation: "线材预制",
          palletname: "#1",
          line1: "234",
          line2: "345",
          aend: "123",
          bend: "123",
          cend: "123",
          dend: "123",
          eend: "123",
          fend: "123",
          impedance: "50欧姆",
          color: "红色",
          isScratch: "否",
          testResults: "合格",
          Inspector: "张三",
          InspectionTime: "2020/5/09 9:34",
        },
        {
          key: "4",
          workStation: "线材预制",
          palletname: "#1",
          line1: "234",
          line2: "345",
          aend: "123",
          bend: "123",
          cend: "123",
          dend: "123",
          eend: "123",
          fend: "123",
          impedance: "50欧姆",
          color: "红色",
          isScratch: "否",
          testResults: "合格",
          Inspector: "张三",
          InspectionTime: "2020/5/09 9:34",
        },
        {
          key: "5",
          workStation: "线材预制",
          palletname: "#1",
          line1: "234",
          line2: "345",
          aend: "123",
          bend: "123",
          cend: "123",
          dend: "123",
          eend: "123",
          fend: "123",
          impedance: "50欧姆",
          color: "红色",
          isScratch: "否",
          testResults: "合格",
          Inspector: "张三",
          InspectionTime: "2020/5/09 9:34",
        },
      ],
      table2Columns: [
        //审批记录表格表头
        {
          title: "时间",
          dataIndex: "time",
        },
        {
          title: "操作人员",
          dataIndex: "operator",
        },
        {
          title: "操作内容",
          dataIndex: "operationContent",
        },
        {
          title: "状态",
          dataIndex: "state",
        },
      ],
      table2Data: [
        //审批记录表格表体
        {
          key: "1",
          time: "2020-08-11",
          operator: "张三",
          operationContent: "提交检验报告到线长确认",
          state: "",
        },
        {
          key: "2",
          time: "2020-08-11",
          operator: "张三",
          operationContent: "提交检验报告到线长确认",
          state: "",
        },
        {
          key: "3",
          time: "2020-08-11",
          operator: "张三",
          operationContent: "提交检验报告到线长确认",
          state: "",
        },
      ],
      processProcessingData: {
        //流程处理
        operation: 1,
        unqualifiedWorkStation: "",
        remarks: "",
        currentProcessor: "张三",
      },
      workStationOptions: [
        {
          name: "组件预制",
          value: 0,
        },
        {
          name: "组件预制1",
          value: 1,
        },
      ],
    };
  },
  computed: {
    count() {
      return this.expand ? 11 : 7;
    },
  },
  updated() {
    console.log("updated");
  },
  created() {},
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>
<style  scoped>
.layout {
  padding: 25px;
}
.title {
  padding: 8px 12px;
  background: #fafafa;
}
.title:not(:first-child) {
  margin-top: 25px;
}
/deep/ .poros-form {
  margin: 15px 0;
}
/deep/ .poros-table {
  margin: 15px 0;
}
/deep/ .poros-col {
  min-height: 54px;
}
/deep/ .poros-table thead th {
  height: 44px;
}
</style>